// 2. 验证的是用户名
const username = document.querySelector('.username')
    // 2.2 使用change事件  值发生变化的时候
username.addEventListener('change', verifyName)
    // 2.3 封装verifyName函数
function verifyName() {
    // console.log(11)
    const span = username.nextElementSibling
        // 2.4 定规则  用户名
        // const reg = /^[a-zA-Z0-9_-]{2,6}$/
    const reg = /^[\u4e00-\u9fa5a-zA-Z0-9]{6,12}$/
    if (!reg.test(username.value)) {
        // console.log(11)
        span.innerText = '请输入2~6位有效字符'
        return false
    }
    // 2.5 合法的 就清空span
    span.innerText = ''
    return true
}

// 5. 验证的是密码框
const password = document.querySelector('.password')
    //5.2 使用change事件  值发生变化的时候
password.addEventListener('change', verifyPwd)
    // 5.3 verifyPhone
function verifyPwd() {
    // console.log(11)
    const span = password.nextElementSibling
        // 5.4 定规则  密码
    const reg = /^[a-zA-Z0-9-_]{6,20}$/
    if (!reg.test(password.value)) {
        // console.log(11)
        span.innerText = '密码由6~20位数字字母符号组成'
        return false
    }
    // 5.5 合法的 就清空span
    span.innerText = ''
    return true
}

// 6. 密码的再次验证
const confirm = document.querySelector('.confirm')
    //6.2 使用change事件  值发生变化的时候
confirm.addEventListener('change', verifyConfirm)
    // 6.3 verifyPhone
function verifyConfirm() {
    // console.log(11)
    const span = confirm.nextElementSibling
        // 6.4 当前表单的值不等于 密码框的值就是错误的
    if (confirm.value !== password.value) {
        // console.log(11)
        span.innerText = '两次密码输入不一致'
        return false
    }
    // 6.5 合法的 就清空span
    span.innerText = ''
    return true
}

// 4. 验证的是验证码
const codeInput = document.querySelector('.verify_code')
const code = document.querySelector('.code')
    //4.2 使用change事件  值发生变化的时候
codeInput.addEventListener('change', verifyCode)
code.addEventListener('click', freshCode)
    // 4.3 verifyPhone
function verifyCode() {
    const span = codeInput.nextElementSibling
        // 4.4 定规则  验证码
    const str = codeInput.value;
    const str1 = code.innerHTML;
    if (str.toUpperCase() == str1.toUpperCase()) //把字符串转换为大写
    {
        span.innerText = ''
        return true
    } else {
        span.innerText = '输入错误'
        return false
    }
}

function freshCode() //按钮的点击事件
{
    var a = [];
    for (var i = 97; i < 122; i++) //a-z【97--122】  小写
    {
        var ss = String.fromCharCode(i); //根据编码返回字符
        a.push(ss);
    }
    for (var i = 65; i < 90; i++) //A-Z【65--90】   大写
    {
        var dd = String.fromCharCode(i); //根据编码返回字符
        a.push(dd);
    }
    var y = [];
    for (var i = 1; i <= 4; i++) {
        var index = parseInt(Math.random() * a.length);
        var ch = a[index];
        y.push(ch);
    }
    var str = y.join("");
    code.innerHTML = str;
}
// 7. 我同意
// 判断是否勾选我同意模块 ，如果有 icon2说明就勾选了，否则没勾选
const queren = document.querySelector('.icon')
queren.addEventListener('click', function() {
    // 切换类  原来有的就删掉，原来没有就添加
    queren.classList.toggle('icon2')
})


// 8. 提交模块
// 获取表单form 里面带有name属性的元素
const form = document.querySelector('form')
const items = form.querySelectorAll('[name]')
const win_msg = document.querySelector('.win_msg')
const exist = document.querySelector('.exist')
    // 本地存储
const data = localStorage.getItem('user_data');
const arr = data ? JSON.parse(data) : [];
// console.log(arr);


form.addEventListener('submit', function(e) {
    // 判断用户名存在
    exist.innerHTML = ''
    if (arr.length > 0) {
        console.log(arr)
        for (let item of arr) {
            console.log(item, items[0].value)
            if (item.username === items[0].value) {
                exist.innerHTML = '用户名已存在'
                return e.preventDefault()
            }
        }
    }
    const obj = {}
    obj.stuId = arr.length ? arr[arr.length - 1].stuId + 1 : 1
    obj[items[0].name] = items[0].value
    obj[items[1].name] = items[1].value

    // 依次判断上面的每个框框 是否通过，只要有一个没有通过的就阻止
    if (!verifyName()) return e.preventDefault()
    if (!verifyCode()) return e.preventDefault()
    if (!verifyPwd()) return e.preventDefault()
    if (!verifyConfirm()) return e.preventDefault()
    if (!queren.classList.contains('icon2')) {
        win_msg.innerText = '！！请勾选同意协议'
        return e.preventDefault()
    }
    // console.log(obj);
    // 追加给数组
    arr.push(obj)
    localStorage.setItem('user_data', JSON.stringify(arr))
        // 重置
    this.reset()
    window.location.href = '../login.html'

})